<script setup>

const props = defineProps({
    modelValue: {
        default: null
    },
    data: {
        default: null
    },
    apiObj: {
        default: null
    }
})

const value = useModel(props, 'modelValue')

const options = ref([])

const loadOptions = async () => {
    if (props.data) {
        options.value = props.data
    }
    if (props.apiObj) {
        const res = await props.apiObj()
        if (res.success) {
            options.value = res.data || []
        } else {
            options.value = []
        }
    }
}

loadOptions()

const setValue = item => {
    if (value.value === item.value) {
        value.value = null
    } else {
        value.value = item.value
    }
}


const getClass = item => {
    if (value.value === item.value) {
        return 'active-item'
    }
    return 'inactive-item'
}


</script>

<template>
    <view class="bang-check-box">
        <view class="check-item" :class="getClass(item)" v-for="(item,index) in options" :key="index" @click="setValue(item)">
            {{item.label}}
        </view>
    </view>
</template>

<style scoped>
.active-item{
    background-color:rgb(235.9, 245.3, 255);
    color: #317AF7;
    border: 2rpx solid #317AF7;
}
.inactive-item{
    color: #000000;
    background-color: #EFEFEF;
}
.check-item{
    width: 156rpx;
    height: 55rpx;
    box-sizing: border-box;
    border-radius: 28rpx 28rpx 28rpx 28rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: PingFang-SC-Medium, PingFang-SC-Medium;
    font-weight: normal;
    font-size: 28rpx;
}
.bang-check-box {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 14rpx;
    column-gap: 22rpx;
}
</style>
